<template>
  <el-card class="questions">
    <DkcSubject @onSubmit="onSubmit"></DkcSubject>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待审核" name="0"></el-tab-pane>
      <el-tab-pane label="已审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <el-alert
      :title="`共${counts}条记录`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table
      :header-cell-style="{ background: '#FAFAFA' }"
      :data="questionData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="number" label="试题编号" width="180">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="80">
      </el-table-column>
      <el-table-column prop="catalog" label="目录"> </el-table-column>
      <el-table-column prop="questionType" label="题型" :formatter="typeFormat">
      </el-table-column>
      <el-table-column prop="question" label="题干"> </el-table-column>
      <el-table-column prop="addDate" label="录入时间" :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        :formatter="difficultyFormat"
      >
      </el-table-column>
      <el-table-column prop="creator" label="录入人"> </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        :formatter="chkStateFormat"
      >
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见"> </el-table-column>
      <el-table-column prop="chkUser" label="审核人"> </el-table-column>
      <el-table-column
        prop="chkUser"
        label="发布状态"
        :formatter="publishStateFormat"
      >
      </el-table-column>

      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template #default="scope">
          <div>
            <el-button type="text" @click="preview(scope.row.id)" size="mini"
              >预览</el-button
            >
            <el-button
              type="text"
              :class="{ disabled: scope.row.chkState !== 0 }"
              :disabled="scope.row.chkState !== 0"
              size="mini"
              @click="checkQuestion(scope.row.id)"
              >审核</el-button
            >
            <el-button
              type="text"
              @click="edit(scope.row)"
              size="mini"
              :class="{ disabled: scope.row.publishState === 1 }"
              :disabled="scope.row.publishState === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="choiceAdd(scope.row, $event)"
              size="mini"
              >{{ scope.row.publishState === 1 ? "下架" : "上架" }}</el-button
            >
            <el-button
              type="text"
              @click="del(scope.row.id)"
              size="mini"
              :class="{ disabled: scope.row.publishState === 1 }"
              :disabled="scope.row.publishState === 1"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :total="counts"
      >
      </el-pagination>
      <DkcDetail
        :outerVisible.sync="outerVisible"
        :questionItem="questionItem"
      ></DkcDetail>
    </div>

    <el-dialog
      title="题目审核"
      :visible.sync="checkDialogVisible"
      width="30%"
      @close="checkDialogVisible = false"
    >
      <el-form :model="checkForm">
        <el-form-item style="width: 50%">
          <el-radio v-model="checkForm.chkState" label="1">通过</el-radio>
          <el-radio v-model="checkForm.chkState" label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-input
            v-model="checkForm.chkRemarks"
            type="textarea"
            placeholder="请输入审核意见"
            :rows="3"
            >通过</el-input
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import DkcSubject from '@/module-hmmm/views/components/DkcSubject.vue'
import DkcDetail from '@/module-hmmm/views/components/DkcDetail.vue'
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  components: {
    DkcSubject,
    DkcDetail
  },
  data () {
    return {
      activeName: 'all',
      params: {
        page: 1,
        pagesize: 10,
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      questionData: [],
      counts: null,
      outerVisible: false,
      checkDialogVisible: false,
      questionItem: {},
      checkForm: {
        chkState: '1',
        chkRemarks: '',
        id: ''
      }

    }
  },
  created () {
    this.choice()
  },
  methods: {
    onSubmit (params) {
      this.params = params
      this.choice()
    },
    async choice () {
      const { data } = await choice(this.params)

      this.questionData = data.items
      this.counts = data.counts
    },
    // 🌈 当标签页被点击 获取不同种类的试题
    handleClick () {
      switch (this.activeName) {
        case 'all':
          this.params.chkState = null // 全部状态
          this.choice() // 重新获取列表
          break
        case '0':
          this.params.chkState = 0 // 待审核
          this.choice() // 重新获取列表
          break
        case '1':
          this.params.chkState = 1 // 通过
          this.choice() // 重新获取列表
          break
        case '2':
          this.params.chkState = 2 // 不通过
          this.choice() // 重新获取列表
          break
      }
    },
    typeFormat (row) {
      if (row.questionType === '1') {
        return '单选'
      } else if (row.questionType === '2') {
        return '多选'
      } else if (row.questionType === '3') {
        return '简答'
      }
    },
    difficultyFormat (row) {
      if (row.difficulty === '1') {
        return '简单'
      } else if (row.difficulty === '2') {
        return '一般'
      } else if (row.difficulty === '3') {
        return '困难'
      }
    },
    chkStateFormat (row) {
      if (row.chkState === 0) {
        return '待审核'
      } else if (row.chkState === 1) {
        return '已审核'
      } else if (row.chkState === 2) {
        return '已拒绝'
      }
    },
    publishStateFormat (row) {
      if (row.publishState === 0) {
        return '下架'
      } else if (row.publishState === 1) {
        return '上架'
      }
    },
    dateFormat (row) {
      return this.$dayjs(row.addDate).format('YYYY-MM-DD')
    },

    handleSizeChange (val) {
      this.params.pagesize = val
      this.choice()
    },
    handleCurrentChange (current) {
      this.params.page = current
      this.choice()
    },
    async preview (id) {
      this.outerVisible = true
      const { data } = await detail(id)

      this.questionItem = data
    },
    checkQuestion (id) {
      this.checkForm.id = id
      this.checkDialogVisible = true
    },
    async save () {
      await choiceCheck({
        chkState: +this.checkForm.chkState,
        chkRemarks: this.checkForm.chkRemarks,
        id: this.checkForm.id
      })
      this.$message.success('审核通过')
      this.checkDialogVisible = false
      this.choice()
    },

    // 去修改试题的页面
    edit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    // 上架和下架试题
    async choiceAdd (item, e) {
      const result = await this.$confirm('您确认' + e.target.innerText + '这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)

      let data = {} // 下面用来接收返回的结果

      // 如果确认就加上架/下架 否则什么都不做
      if (result === 'confirm') {
        switch (e.target.innerText) {
          case '上架':
            data = await choicePublish({
              id: item.id,
              publishState: 1
            })
            break

          case '下架':
            data = await choicePublish({
              id: item.id,
              publishState: 0
            })
            break
        }

        if (data.status === 200) {
          this.$message.success(e.target.innerText + '成功')
        }
        // 更新题库列表
        this.choice()
      }
    },
    async del (id) {
      await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.choice()
    }
  }
}
</script>

<style scoped lang="scss">
.questions {
  margin: 20px 20px;
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
